<template>
    <div class="task-item-container" @click="handleTask(!data.isAnswer || isPreview ? 'answer' : 'view')">
        <div class="top">
            <div class="flex-box">
                <!-- <div class="need-answer" v-if="data.compulsory">必答</div> -->
                <div class="task-name">
                    <div style="max-width:840px;">
                        <Ellipsis :content="data?.title || ''"></Ellipsis>
                    </div>
                    <div class="have-answer" v-if="data.isAnswer">
                        <img class="answer-icon" src="@/assets/img/mooc/answered.png" alt="">
                        <span>已作答</span>
                    </div>
                </div>
            </div>
            <div v-if="!isPreview">
                <el-button type="primary" link class="answer-task see-task" v-if="data.isAnswer">查看结果</el-button>
                <el-button v-else class="answer-task">去作答<i class="iconfont icon-lijibaomingjiantou"></i></el-button>
            </div>
            <!-- 预览状态下一直显示去报名按钮 点击给统一的不能操作的提示 -->
            <div v-else>
                <el-button  class="answer-task">去作答<i class="iconfont icon-lijibaomingjiantou"></i></el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import Ellipsis from '@/components/ellipsis.vue';
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { jumpHref } from '@/router/jumpHref'

const route = useRoute();

const emit = defineEmits(['obtain-course']);

const props = defineProps({
    data: {
        type: Object,
        default: () => {}
    },
    isCreater: { // 是否是创建者
        type: Boolean,
        default: false
    },
    isBuyPerson: { // 是否是购买者
        type: Boolean,
        default: false
    },
    isPreview: { // 是否是预览状态
        type: Boolean,
        default: false 
    }
})

// 操作作业的类型 view 查看 answer 答题
const taskType = ref('');

function handleTask (type) {
    taskType.value = type;
    if (props.isPreview) {
        G_dispatchEvent('toast', { message: '预览状态下不可操作', type: 'error'});
        return
    }
    validPermission((type) => {
        if (taskType.value === 'answer') {
            G_go(jumpHref.questionMoocTest.answer(props.data.assessId, props.data.id), true)
        } else {
            G_go(jumpHref.questionMoocTest.result(props.data.assessId, props.data.id), true);
        }
    });
}

// 校验是否有权限查看/作答
function validPermission (nextFn) {
    if (props.isBuyPerson) {
        nextFn && nextFn();
    } else {
        emit('obtain-course');
    }
}
</script>

<style lang="scss" scoped>
.task-item-container {
    margin-top: 20px;
    color: var(--srt-main-text-color);
    font-family: MicrosoftYaHei;
    cursor: pointer;
    .top {
        height: 48px;
        border-radius: 4px;
        border: 1px solid #E0E2E4;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px 0 16px;
        .need-answer {
            width: 36px;
            height: 18px;
            font-size: 12px;
            color: #FF4719;
            background: #FFE4DD;
            border-radius: 10px;
            line-height: 16px;
            text-align: center;
            border: 1px solid #FF4719;
            margin-right: 10px;
        }
        .task-name {
            display: inline-flex;
            align-items: center;
            font-size: 16px;
            font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
            font-weight: bold;
            line-height: 16px;
            max-width: 766px;
        }
        .flex-box {
            display: flex;
            align-items: center;
        }
        .have-answer {
            display: inline-flex;
            align-items: center;
            .answer-icon{
                width:16px;
                height: 16px;
                margin-right: 5px;
            }
            font-size: 14px;
            color: #00B042;
            margin-left: 14px;
        }
        .remain-times {
            font-size: 14px;
            color: var(--srt-color-gray);
            span:nth-child(1) {
                color: #47698C;
            }
            span:nth-child(2) {
                color: var(--srt-main-text-color);
            }
        }
        
        .answer-task {
            width: 80px;
            height: 28px;
            color: #fff;
            padding: 5px 11px;
            // margin-right: 12px;
            border: none;
            background: #0084F6;
            border-radius: 4px;
            font-size: 14px;
        }
        .see-task {
            height: 28px;
            color: var(--srt-main-active-text-color);
            padding: 0;
            // margin: 0 20px 0 0;
            font-family: MicrosoftYaHei;
            font-size: 14px;
            color: #00B042;
            border: 1px solid #00B042;
            background-color: #fff;
        }
    }
    .top:hover{
        box-shadow: 0px 2px 16px 0px rgba(11,23,73,0.1);
    }
}
</style>